<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>box-shadow:</title>
<style>
.view {
  padding: 20px; /* shadow padding */
}
.boxshadow0 {
  margin: 20px 0 0 30px;
  padding: 2px;
  border: 1px solid navy;
  -uu-box-shadow: blue 10px 10px 20px;
}
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.boxshadow2 {
  margin: 20px 0 0 30px;
  padding: 2px;
  border: 4px solid navy;
  -uu-box-shadow: blue 5px 5px 5px;
}
.radius1 {
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}
.noeffect {
  -uu-box-effect: none;
}
</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script src="../../uuAltCSS.js"></script>
<script>
function boot() {
  setTimeout(function() {
    var nodes = uuQuery(".noeffect"), v, i = 0;

    while ( (v = nodes[i++]) ) {
      uuAltCSS.setExStyle(v, "-uu-box-effect", "auto");
    }
    uuAltCSS.redraw();
  }, 1000);
}
</script>
</head>
<body>


<div class="view"><div class="boxshadow0 noeffect"><pre>
.boxshadow0 {
  margin: 20px 0 0 30px;
  padding: 2px;
  border: 1px solid navy;
  -uu-box-shadow: blue 0px 0px 10px;
}
.noeffect {
  -uu-box-effect: none;
}</pre></div></div>


<div class="view"><div class="boxshadow2 noeffect"><pre>
.boxshadow2 {
  margin: 20px 0 0 30px;
  padding: 2px;
  border: 4px solid navy;
  -uu-box-shadow: blue 5px 5px 5px;
}
.noeffect {
  -uu-box-effect: none;
}</pre></div></div>



<div class="view">
  <div class="boxshadow1 radius1 noeffect"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.radius1 {
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}
.noeffect {
  -uu-box-effect: none;
}</pre></div>
</div>


</body>
</html>